<template>
	<view class="comment-list">
		<view class="tabbox">
			<view v-for="(item, i) in toplist" :key="i" class="tab" @click="topChange(item.id)">		
				<view :class="topSign==item.id ? 'active num' : 'num'" > {{item.count || 0}} </view>
				<view :class="topSign==item.id ? 'active title' : 'title'">
					{{item.name}}
				</view>
				<view :class="topSign==item.id ? 'underline' : ''"></view>
			</view>
		</view>
		<view class="comment-list__list" v-if="datasource.length">
			<view class="block-box comment-list__list--item" v-for="item in datasource" :key="item.id">
				<view class="flex item-header">
					<view>
						<image :src="item.userAvatar"></image>
						<text>{{item.userNickName}}</text>
					</view>
					<text>{{item.createTime | formatDate}}</text>
				</view>
				<view class="flex item-rate">
					<text>{{item.categoryName}}</text>
					<uni-rate :value="item.scores" disabledColor="#F93A59" size="18" :disabled="true"></uni-rate>
				</view>
				<view class="item-content">
					{{item.content}}
				</view>
				<view class="item-image" v-if="item.picUrls">
					<image :src="image" v-for="image in item.picUrls.split(',')" 
					:key="image" @click="look(image,item.picUrls.split(','))"></image>
				</view>
			</view>
		</view>
		 <no-data v-else></no-data>
	</view>
</template>

<script>
	import {staffCommentAPI,commentCountAPI} from "@/api/user.js"
	export default {
		data() {
			return {
				datasource:[],
				staffId:'',
				toplist:[
					{id:0,name:"全部",count:0},
					{id:1,name:"图/视频",count:0},
					{id:2,name:"优质好评",count:0},
					{id:3,name:"中评",count:0},
					{id:4,name:"差评",count:0},
				],
				topSign:0,
				picUrls:[]
			}
		},
		
		onLoad(option) {
			this.staffId=option.staffId
			this.commentCount()
			this.getlist()
		},
		methods: {
			commentCount(){
				 
				commentCountAPI({staffId:this.staffId}).then(res=>{
					this.toplist=[
					{id:0,name:"全部",count:res.all},
					{id:1,name:"图/视频",count:res.pic},
					{id:2,name:"优质好评",count:res.good},
					{id:3,name:"中评",count:res.centre},
					{id:4,name:"差评",count:res.differ},
				]
				})
			},
			getlist(){
				staffCommentAPI({
					staffId:this.staffId,
					type:this.topSign
				}).then(res=>{
					this.datasource=res
					 
				})
			},
			topChange(n){
				this.topSign=n
				this.pageNo=1
				this.list=[]
 				this.getlist()
			},
			look(current, urls) {
				uni.previewImage({
					current,
					urls,
					// 只在app里面起作用
					loop: true,
					indicator: "number"
			
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
 
.comment-list{
	background-color: #F8F8F8;
	min-height: 100vh;
	padding: 100rpx 0 30rpx;
		&__list{
			width: 100%;
			padding: 20rpx;
		 
			&--item{
				background-color: #fff;
				padding: 26rpx;
				margin-top: 30rpx;
				border-radius: 20rpx;
				.item-header{
					justify-content: space-between;
					&>view{
						display: flex;
						align-items: center;
						image{
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
					}
					&>text{
						color: #999;
						font-size: 24rpx;
						font-weight: 500;
					}
				}
				.item-rate{
					justify-content: space-between;
					margin-top: 20rpx;
					&>text{
						color: #999;
						font-weight: normal;
					}
				}
				.item-content{
					margin-top: 16rpx;
				}
				.item-image{
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						border-radius: 8prx;
						 
						margin: 10rpx;
						width: 200rpx;
						height: 200rpx;
					}
				}
			}
		}
	}
.tabbox{
	position: fixed;
	top: 0px;
	left: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding:0 30rpx;
	background-color: #fff;
	z-index: 99;
	// height: 100rpx;
	border-bottom: 1px solid #eef0f4;
	width: 100%;
	.tab{
		padding: 20rpx;
		position: relative; 
		text-align: center;
		.num{
			font-size: 24rpx;
			color: #666666;
		}
		.title{
			font-size: 28rpx;
			color: #666666;
		}
		.active{
			font-weight: bold;
			color: #333;
			
			
		}
		.underline{
			position: absolute;
			bottom: 0;
			left:  30%;
			width:40%;
			height: 6rpx;
			background:$uni-color-primary;
			border-radius: 1px;
		}
		 
	}
	
	
}
	
</style>
